<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>居家</title>
	<link rel="stylesheet" href="./css/common.css">
	<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
	<style>
.w{
	width: 1090px;
	margin: 0 auto;
}
*{
	box-sizing: border-box;
}
#buyBtn{
    display: block;
    width: 118px;
    height: 31px;
    line-height: 31px;
    text-align: center;
    font-size: 16px;
    border-radius: 2px;
    cursor: pointer;
    background-color: #be4141;
    color: #ffffff;
}
.w::after{
	content: "";
	display: block;
	clear: both;
}
.commonHeader{
	margin: 20px 0;
	height: 30px;
	line-height: 30px;
}
.commonHeader::after{
	content: "";
	display: block;
	clear: both;
}
.commonHeader h1{
    line-height: 30px;
    float: left;
}
.commonHeader > h1:hover{
	color: #b4a078;
}


.commonHeader > .jj-nav{
	line-height: 28px;
	height: 30px;
	text-align: right;
}
.commonHeader > .jj-nav::after{
	content: "";
	display: block;
	clear: both;
}
.commonHeader > .jj-nav > *:hover{
	color: #b4a078;
	border-bottom: 2px solid#b4a078;
	color: #b4a078;
}
.commonHeader > .jj-nav > *{
	margin: 0 5px;
	float: right;
}
.commonHeader > .jj-nav > a{
	height: 30px;
	line-height: 30px;
}
	#pro-desc{
		    position: absolute;
		    z-index: 3;
		    height: 18px;
		    font-size: 12px;
		    color: #a7936e;
		    border: 1px solid #b3a07d;
		    border-radius: 5px;
		    padding: 0 2px;
		    line-height: 18px;
		    background-color: #f4f0ea;
		    margin: 10px;
	}
.allBtn{
    font-size: 14px;
    line-height: 30px;
    height: 30px;
    text-align: right;
}
.allBtn:hover{
	color: #b4a078;
}

	#Prices{
		    display: inline-block;
		    height: 20px;
		    line-height: 20px;
		    color: #fff;
		    padding: 0 5px;
		    font-size: 12px;
		    background-color: #e36844;
	}
	/*爆品*/
	#hots{
		    display: inline-block;
		    height: 20px;
		    line-height: 20px;
		    color: #fff;
		    padding: 0 5px;
		    font-size: 12px;
		    background-color: #F28F2D;		
	}
	/*图片上的icon*/
	#pro-desc{
		    position: absolute;
		    z-index: 3;
		    height: 18px;
		    font-size: 12px;
		    color: #a7936e;
		    border: 1px solid #b3a07d;
		    border-radius: 5px;
		    padding: 0 2px;
		    line-height: 18px;
		    background-color: #f4f0ea;
		    margin: 10px;
	}

.jujia{
	width: 100%;
}
.jujia > .products{

}
.jujia > .products::after{
	content: "";
	display: block;
	clear: both;
}
.jujia > .products > li{
	width: 265px;
	float: left;
	margin-top: 10px;
	margin-right: 7px;
}
.jujia > .products > li:nth-child(4){
	padding-right: 0;
}
.jujia > .products img{
	width: 265px;
	height: 265px;
	position: relative;
    margin-bottom: 8px;
    overflow: hidden;
    background-color: #f4f4f4;
}
.jujia > .products > li .itemInfo{
	text-align: center;
}
.jujia > .products > li .itemInfo > .price{
	color: #D4282D;
}

</style>
</head>
<body>
	<div class="public-w">
		<div class="w">
			<div class="jujia">
				<div class="commonHeader">
					<h1 href="">人气推荐</h1>
					<div class="jj-nav">
						<p class="allBtn">查看更多 &gt; </p>
						<a href="#" class="item">床品件套</a><i>/</i>
						<a href="#" class="item">被枕</a><i>/</i>
						<a href="#" class="item">家具</a><i>/</i>
						<a href="#" class="item">灯具</a><i>/</i>
						<a href="#" class="item">收纳</a><i>/</i>
						<a href="#" class="item">布艺软装</a><i>/</i>
						<a href="#" class="item">夏凉</a>
					</div>
				</div>
				<div class="img">
					<img src="./images/xirongmian.png" alt="dsaf">
				</div>
				<ul class="products">
					<li>
						<img src="./images/liangshaijia.png" alt="">
						<div class="itemInfo">
							<div id="hots">满折</div>
							<div class="name">晾晒架</div>
							<div class="price">￥249</div>
						</div>
					</li>
					<li>
						<div id="pro-desc">4色可选</div>
						<img src="./images/gwsjt.png" alt="">
						<div class="itemInfo">
							<div id="hots">七夕特惠</div>
							<div class="name">格纹四件套</div>
							<div class="price">￥299</div>
						</div>
					</li>
					<li>
						<img src="./images/bobei.png" alt="">
						<div class="itemInfo">
							<div id="hots">今日特价</div>
							<div class="name">蚕丝薄被</div>
							<div class="price">￥683.1</div>
						</div>
					</li>
					<li>
						<div id="pro-desc">8色可选</div>
						<img src="./images/baozhen.png" alt="">
						<div class="itemInfo">
							<div id="hots">满折</div>
							<div class="name">抱枕</div>
							<div class="price">￥29</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>